/**
* 功能描述: 文字提示demo
* @author 崔孝楠
* @date 2022/10/6 10:30
* @version 1.0
*/
<template>
  <div style="margin: 50px">
    <!-- top left -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">top left</button>
      <!-- top left tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-top-left">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">top left</div>
      </div>
    </div>
    <!-- top -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">top</button>
      <!-- top tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-top">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">top</div>
      </div>
    </div>
    <!-- top right -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">top right</button>
      <!-- top right tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-top-right">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">top right</div>
      </div>
    </div>
    <!-- right top -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">right top</button>
      <!-- right top tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-right-top">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">right top</div>
      </div>
    </div>
    <!-- right -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">right</button>
      <!-- right tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-right">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">right</div>
      </div>
    </div>
    <!-- right bottom -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">right bottom</button>
      <!-- right bottom tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-right-bottom">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">right bottom</div>
      </div>
    </div>
    <!-- bottom right -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">bottom right</button>
      <!-- bottom right tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-bottom-right">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">bottom right</div>
      </div>
    </div>
    <!-- bottom -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">bottom</button>
      <!-- bottom tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-bottom">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">bottom</div>
      </div>
    </div>
    <!-- bottom left -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">bottom left</button>
      <!-- bottom left tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-bottom-left">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">bottom left</div>
      </div>
    </div>
    <!-- left bottom -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">left bottom</button>
      <!-- left bottom tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-left-bottom">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">left bottom</div>
      </div>
    </div>
    <!-- left -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">left</button>
      <!-- left tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-left">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">left</div>
      </div>
    </div>
    <!-- left top -->
    <div class="yw-tooltip-wrapper">
      <button class="yw-btn">left top</button>
      <!-- left top tooltip -->
      <div class="yw-tooltip yw-tooltip-placement-left-top">
        <div class="yw-tooltip-arrow">
          <span class="yw-tooltip-arrow-content"></span>
        </div>
        <div class="yw-tooltip-inner">left top</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.yw-tooltip-wrapper {
  margin: 10px;
}
</style>
